<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">

      <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

      <el-row>
        <!-- <line-chart :chart-data="lineChartData" /> -->
        <date-range-picker ref="datePicker" v-model="createTime" @blur="getStatistic" class="date-item" />

      </el-row>
      <el-row class="statistic-container">
        <el-col :span="6">
        <el-statistic
            group-separator=","

            :value="count"
            title="训练人次"
          ></el-statistic>
          </el-col>
          <el-col :span="6">
        <el-statistic
            group-separator=","

            :value="count"
            title="合格人数"
          ></el-statistic>
          </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import crudTrainStatistic from '@/api/trainStatistic'
import PanelGroup from './dashboard/PanelGroup'
// import LineChart from './dashboard/LineChart'
// import RadarChart from '@/components/Echarts/RadarChart'
// import PieChart from '@/components/Echarts/PieChart'
// import BarChart from '@/components/Echarts/BarChart'
import DateRangePicker from '@/components/DateRangePicker'


const date = new Date();
export default {
  name: 'Dashboard',
  components: {

    PanelGroup,
    DateRangePicker
    // LineChart,
    // RadarChart,
    // PieChart,
    // BarChart
  },

  data() {
    return {
      count: 0,
      createTime: [new Date(new Date().setMonth(date.getMonth() - 1)).strftime(), 
      date.strftime()]
    }
  },
  
  created(){
    this.getStatistic()
  },
  beforeDestroy() {

  },

  methods: {
    getStatistic() {
      console.log("changeDate")
      crudTrainStatistic.list({current: 1, size: 1000, createTime: this.createTime}).then(res => {
        console.log(res)
        this.count = res.totalElements
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .statistic-container {
    padding: 30px 0px;
  }

  >>> .el-statistic .con .number, >>> .el-statistic .head {
      font-size: 34px !important;


  }
  .dashboard-editor-container {
    padding: 36px;
    position: relative;

    .github-corner {
      position: absolute;
      top: 0;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
